<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="职位名">
        <el-input v-model="formInline.name" placeholder="职位名"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.enabled" placeholder="状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-button type="success" icon="el-icon-circle-plus" @click="showAddDialog">新增职位</el-button>
    </el-form>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="职位ID" width="180"></el-table-column>
      <el-table-column prop="name" label="职位名称" width="180"></el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="enabled" label="状态">
        <template #default="scope">
          <el-button :type="scope.row.enabled ? 'success' : 'info'">
            {{ scope.row.enabled ? '启用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.pageNum"
      :page-sizes="[10, 20, 30]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="职位名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.enabled" placeholder="请选择状态">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formInline: {
        name: '',
        enabled: ''
      },
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dialogVisible: false,
      dialogTitle: '新增职位',
      form: {
        name: '',
        enabled: '1'
      }
    };
  },
  methods: {
    handleSearch() {
      this.pagination.pageNum = 1;
      this.fetchData();
    },
    showAddDialog() {
      this.dialogTitle = '新增职位';
      this.form = {
        name: '',
        enabled: '1'
      };
      this.dialogVisible = true;
    },
    showEditDialog(row) {
      this.dialogTitle = '编辑职位';
      this.form = {
        id: row.id,
        name: row.name,
        enabled: String(row.enabled)
      };
      this.dialogVisible = true;
    },
    handleDelete(id) {
      this.$confirm('确认删除该职位吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:8888/position/delete/${id}`).then(() => {
          this.$message.success('删除成功');
          this.fetchData();
        }).catch(() => {
          this.$message.error('删除失败');
        });
      }).catch(() => {});
    },
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize;
      this.fetchData();
    },
    handleCurrentChange(pageNum) {
      this.pagination.pageNum = pageNum;
      this.fetchData();
    },
    handleConfirm() {
      
      const url = this.dialogTitle === '新增职位' ? 'http://localhost:8888/position/add' : `http://localhost:8888/position/update`;
      axios.post(url, this.form, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => {
  
    if (response.code === 200) {
      this.$message.success(response.data);
      this.dialogVisible = false;
     this.fetchData();
    } else {
      this.$message.error(response.message);
    }
    
  }).catch(() => {
    this.$message.error('操作失败');
  });


    },
    fetchData() {
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        name: this.formInline.name,
        enabled: this.formInline.enabled
      };

      axios.post('http://localhost:8888/position/getList', params, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => {
    this.tableData = response.data || [];
  }).catch(() => {
    this.$message.error('获取数据失败');
  });

      axios.get('http://localhost:8888/position/count', { params }).then(response => {
        this.total = response.data;
      }).catch(() => {
        this.$message.error('获取数据失败');
      });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>



  
  <style scoped>
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>
  